<template>
	<view class="box">
		<!-- v-if="!isCheck" -->
		<view v-if="!isCheck" style="width: 95%;margin: 0 auto;">
			<u-search :showAction="true" v-model="value" @search="search" :actionText="text" @custom="custom"
				:clearabled="false" @clear="clear" :animation="false"></u-search>
			<view style="display: flex;justify-content: space-around;align-items: center;margin: 20rpx;">
				<view :class="{ative:e==index}" @click="btn(e)" v-for="(i,e) in list" :key="i.id"
					style="font-size: 26rpx;color: #333;padding: 15rpx 25rpx;background-color: #fff;border-radius: 50rpx;">
					{{i.name}}
				</view>
			</view>
			<scroll-view @scrolltolower="scrolltolower" :refresher-enabled="true"
				:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh"
				@refresherrestore="refresherrestore" @refresherabort="refresherabort" style="height: 90vh;" scroll-y
				v-if="arrList.length>=1">
				<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
					<view v-for="(i,e) in arrList" :key="i._id">
						<button @navigatetovideoview="navigatetovideoview" open-type="navigateToVideoView"
							:data-video-id="i.videoId"
							:style="{background:'url('+i.cover_url+') no-repeat 0 0/ 100% 100%'}"
							style="margin-bottom: 20rpx;width: 348rpx;height: 416rpx;border-radius: 20rpx;display: flex;flex-direction: column;justify-content: space-between;padding: 10rpx;">
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<view>
									<view></view>
									<view><u-rate :count="getnum(i.num)" activeColor="#fdc64d" :size="18"
											:value="getnum(i.num)"></u-rate></view>
								</view>
								<view style="font-size: 24rpx;color: #fff;font-weight: 500;text-align: right;">
									<view>{{i.km}}km</view>
									<view>{{i.city}}·{{i.district}}</view>
								</view>
							</view>
						</button>
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
						:nomore-text="nomoreText" />
				</view>
			</scroll-view>
			<view v-else style="position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);">
				<u-empty mode="list"></u-empty>
			</view>
		</view>
		<scroll-view v-else style="padding: 20rpx;">
			<map id="myMap" style="width: 100%;height: 88vh;" @tap.prevent="markerTap" @markertap="markerTap"
				:enable-zoom="zoomshow" :enable-scroll="zoomshow" :enable-satellite="vxshow"
				:latitude="arrdata.latitude" :longitude="arrdata.longitude" :markers="markers" :circles="circles"
				show-location :scale="1"></map>
			<view @click="isdiad"
				style="width: 90rpx;height: 110rpx;border-radius: 20rpx;background-color: #fff;position: absolute;right: 32rpx;top: 220rpx;z-index: 99;">
				<view v-if="!vxshow"
					style="display: flex;align-items: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
					<image style="width:60rpx;height:60rpx" src="../../static/wx.png"></image>
					<view>卫星图</view>
				</view>
				<view v-else
					style="display: flex;align-items: center;justify-content: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
					<image style="width:60rpx;height:60rpx" src="../../static/biaozhun.png"></image>
					<view>标准图</view>
				</view>
			</view>
		</scroll-view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingText: '努力加载中',
				loadmoreText: '实在没有了',
				nomoreText: '实在没有了',
				refresherTriggered: false,
				_refresherTriggered: false,
				status: 'loadmore',
				text: '长沙市',
				name: '长沙市',
				value: '',
				index: 0,
				arrList: [],
				latitude: null,
				longitude: null,
				pageSize: 20,
				pageNum: 1,
				data1: [],
				list: [{
						id: 1,
						name: '热门推荐'
					},
					{
						id: 2,
						name: '最新发布'
					},
					{
						id: 3,
						name: '热门钓点'
					},
					{
						id: 4,
						name: '离我最近'
					},
				],
				isCheck: false,
				vxshow: false,
				markers: []
			}
		},
		onLoad() {
			this.getisCheck()
			this.getProvince()
			this.mapCtx = tt.createMapContext("myMap");
		},
		onShow() {
			uni.$on('address', (res) => {
				if (res && res.length == 3) {
					this.text = res[2]
				} else {
					this.text = res[1]
				}
				this.value = ''
			})

		},
		methods: {
			async getisCheck() {
				const {
					data: res
				} = await this.$http.post('/pageList/isCheck', {})
				if (res.errCode == 200) {
					this.isCheck = res.data.isCheck
					this.data1 = res.data1
					this.data1.forEach((item) => {
						let arr = {
							title: item.address,
							longitude: item.longitude,
							latitude: item.latitude,
							alpha: 1,
							anchorX: 0.5,
							anchorY: 1,
						}
						this.markers.push(arr)
					})

				}
			},
			markerTap(e) {
				console.log('tap marker', e);
				uni.navigateTo({
					url: "/pages/map/map"
				})
				// this.msg('tap-marker');
			},
			navsd(id) {
				uni.navigateTo({
					url: '/pages/dyxiugai/dyxiugai?id=' + id
				})
			},
			navigatetovideoview(e) {
				if (e.detail.errNo) {
					console.log("跳转视频播放页失败", e.detail);
				} else {
					console.log("跳转视频播放页成功");
				}
			},
			async screen() {
				uni.showLoading({})
				this.arrList = []
				const {
					data: res
				} = await this.$http.post('/pageList/screen', {
					keyword: this.text,
					index: this.index,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				})
				if (res.errCode == 200) {
					uni.hideLoading()
					this.arrList = [...res.data, ...this.arrList]
					this.arrList.forEach((i, e) => {
						i.km = ''
						if (i.latitude) {
							i.km = this.getDistance(this.latitude, this.longitude, i.latitude, i.longitude)
						}
					})
					if (this.index == 3) {
						this.arrList = this.arrList.sort((a, b) => a.km - b.km);
					}
					if (this.arrList.length < 1) {
						this.$refs.uToast.show({
							type: 'error',
							message: "当前城市没钓点，请切换城市",
						})
					}
				}
			},
			search(e) {
				if (!e) {
					this.text = this.name
					return
				}
				this.text = e
			},
			isdiad() {
				this.vxshow = !this.vxshow
			},
			clear() {
				this.text = this.name
			},
			getnum(num) {
				if (num <= 1) {
					return 1
				}
				if (num > 1 && num <= 50) {
					return 2
				}
				if (num > 50 && num <= 100) {
					return 4
				}
				if (num > 100) {
					return 5
				}
			},
			getDistance(lat1, lon1, lat2, lon2) {
				const R = 6371; // 地球半径，单位为千米
				const dLat = (lat2 - lat1) * Math.PI / 180;
				const dLon = (lon2 - lon1) * Math.PI / 180;
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = R * c;
				let addnum = distance.toFixed(2); // 保留两位小数
				// return `${addnum}km`
				return Number(addnum)
			},
			btn(e) {
				this.index = e
			},
			getProvince() {
				tt.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.latitude = res.latitude; // 当前位置纬度
						this.longitude = res.longitude; // 当前位置经度
						this.text = res.city
						this.name = res.city
					},
					fail(res) {
						console.log("getLocation调用失败", res);
					}
				})
			},
			custom() {
				uni.navigateTo({
					url: '/pages/maplist/maplist?name=' + this.text
				})
			},
			//滚动到底部
			scrolltolower() {
				if (this.arrlist.length >= this.total) {
					console.log('没有了')
					this.status = 'nomore'
				} else {
					this.status = 'loading'
					this.pageNum++
					this.screen()
				}
			},
			//下拉刷新
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			//下拉刷新被复位
			refresherrestore() {
				console.log("自定义下拉刷新被复位");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			//下拉刷新被中止
			refresherabort() {
				console.log("自定义下拉刷新被中止	");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			//加载数据
			loadStoreData() {
				let _this = this;
				_this.listData();
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1000)
			},
			//刷新数据
			listData() {
				uni.showLoading({
					title: '正在刷新',
					success: (res) => {
						this.arrList = []
						this.screen()
						if (this.arrList) return uni.stopPullDownRefresh(), uni.hideLoading()
					}
				})
			},
		},
		watch: {
			text: {
				handler(newVal, oldVal) {
					this.screen()
				},
			},
			index(newVal, oldVal) {
				console.log(`新的值: ${newVal}`);
				this.screen()
			}
		}
	}
</script>

<style scoped lang="scss">
	button::after {
		border: none !important;
	}

	.ative {
		color: #dd5446 !important;
		border: 1rpx solid #dd5446;
	}

	/deep/ .u-search__action--active {
		margin-left: -5rpx !important;
	}

	.box {
		width: 100vw;
		height: 100vh;
	}
</style>